<template>
	<view class="bottom pf x-f">
		<view class="y-f" @tap.stop="jump">
			<image class="logo" :src="isCollection ? bottom[0].select: bottom[0].img"></image>
			<view class="bottom-title">{{bottom[0].title}}</view>
		</view>
		<view class="y-f" @tap.stop="jumpCon">
			<image class="logo" :src="bottom[1].img"></image>
			<view class="bottom-title">{{bottom[1].title}}</view>
		</view>
		<view class="btn">
			<view class="add_cart tc" @tap="jumpCart" v-show="!show_group">加入购物车</view>
			<view class="add_exchage tc" @tap="exchange" v-show="show_group">立即兑换</view>
			<view class="pay tc" :style="{background:btnBg,color:font_color,heigth:ex_height,'line-height':ex_height}"
				@tap="exchange" v-show="!show_group">立即兑换</view>
			<view class="pay tc" :style="{background:btnBg,color:font_color,heigth:ex_height,'line-height':ex_height}"
				@click="myTeam" v-show="show_group">发起拼团</view>
		</view>
		<!-- 电话组件 -->
		<phone ref="phonePopup" :mobile="mobile"></phone>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			btnBg: {
				type: String,
				default: 'linear-gradient(269deg,#ff977b 5%, #ff2d1b 95%)'
			},
			show_group: {
				type: Boolean,
				default: false
			},
			bottom: {
				type: Array,
				default: []
			},
			font_color: {
				type: String,
				default: '#fff'
			},
			//立即兑换按钮的高度
			height: {
				type: Number,
				default: 0
			},
			// 收藏
			isCollection: {
				type: Number,
				default: 0
			},
			// 电话
			mobile: {
				type: Number,
				default: 0
			},
		},
		computed: {
			...mapState({
				// goods: state => state.goods.goodsInfo,
				collectList: state => state.user.collect, // 个人收藏信息
			}),
			ex_height() {
				return uni.upx2px(this.height) + 'px'
			}
		},
		data() {
			return {}
		},
		methods: {
			jump() {
				this.$emit('getCollect')
			},
			jumpCon() {
				this.$refs.phonePopup._data.showTel = true
			},
			//加入购物
			jumpCart() {
				this.$emit('jumpCart')
			},
			//立即兑换
			exchange() {
				this.$emit('exchange')
			},
			//发起拼团
			myTeam() {
				this.$emit('myTeam')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
